<template>
  <div class="h-full  py-8 px-4 sm:px-6 lg:px-8">
    <div class="max-w-4xl mx-auto  rounded-xl p-4 sm:p-6 " style=" background: linear-gradient(rgb(241 241 241), rgb(173 215 197));">
      <a-card >

      <h1 class="text-3xl font-bold text-gray-900 p-8 text-center">记录一次有趣的旅行</h1>

      <a-form
          :model="formState"
          @finish="onFinish"
          ref="formTravelRef"
          :label-col="labelCol"  :wrapper-col="wrapperCol"
          style="width: 90%;margin-left: auto;margin-right:auto"
      >
        <!-- 标题 -->
        <a-form-item
            name="title"
            label="标题"
            :rules="[{ required: true, message: '请输入标题' }]"
        >
          <a-input v-model:value="formState.title" placeholder="请输入旅行标题" />
        </a-form-item>
        <a-form-item label="标签"  name="tags"  :rules="[{ required: false, type: 'array', message: '请输入至少一个标签' }]">
          <a-select
              v-model:value="formState.tags"
              mode="tags"
              class="tag-class"
              placeholder="请输入标签,方便查询"
          ></a-select>
        </a-form-item>
        <!-- 简介 -->
        <a-form-item
            name="description"
            label="简介"
            :rules="[{ required: true, message: '请输入简介' }]"
        >
          <a-textarea
              v-model:value="formState.description"
              :rows="4"
              placeholder="请输入旅行简介"
          />
        </a-form-item>

        <a-form-item name="是否隐藏" label="isHidden">
          <a-switch :checkedValue="true" :unCheckedValue="false" v-model:checked="formState.isHidden" />
        </a-form-item>
        <a-form-item
            name="cover"
            label="封面"
            :rules="[{ required: false, message: '请上传封面' }]"
        >
          <a-upload
              v-model:fileList="formState.coverList"
              name="cover"
              :max-count="1"
              :multiple="false"
              list-type="picture-card"
              :customRequest="$customRequest"
              :before-upload="beforeUpload"
              @change="handleChangeCover"
              @preview="handlePreview"
          >
            <div v-if="formState.coverList<1">
              <plus-outlined />
              <div style="margin-top: 8px">上传封面</div>
            </div>
          </a-upload>
        </a-form-item>
        <!-- 照片上传 -->
        <a-form-item
            name="photoList"
            label="旅行照片"
            :rules="[{ required: true, message: '请上传至少一张照片' }]"
        >
          <a-upload
              v-model:fileList="formState.photoList"
              :list-type="`overflow-y`"
              :max-count="1000"
              :multiple="true"
              :customRequest="$customRequest"
              :before-upload="beforeUpload"
              @change="handleChangePhoto"
              @preview="handlePreview"
          >
            <div v-if="formState.photoList.length < 1000" style=" display: flex;    flex-direction: row;    align-items: center;    margin: 5px;">
              <template v-if="listType">
                <plus-outlined />
                <div class="mt-2">上传照片</div>
              </template>
              <template v-else>
                <upload-outlined></upload-outlined>
                上传照片
              </template>
            </div>
            <template #itemRender="{ file, fileList, actions }">
              <a-space>
                <!--text-ellipsis w-96 overflow-hidden block text-nowrap-->
                <span class="" :style="file.status === 'error' ? 'color: red' : ''" :title=" file.name ">{{ file.name }}</span>
                <a href="javascript:;" style="color:green" v-if="!isUploading" @click="movePreview(file)">preview</a>
                <a href="javascript:;" style="color:red" v-if="!isUploading" @click="moveDown(file,fileList)">down</a>
                <a href="javascript:;" style="color:blue" v-if="!isUploading" @click="moveUp(file,fileList)">up</a>
                <a href="javascript:;" style="" v-if="!isUploading" @click="actions.remove">delete</a>
              </a-space>
            </template>
          </a-upload>
        </a-form-item>

        <!-- 视频上传 -->
        <a-form-item name="video" label="视频">
          <a-upload
              v-model:fileList="formState.videoList"
              :customRequest="$customRequest"
              :max-count="1"
              :multiple="false"
              :before-upload="beforeUploadVideo"
              @change="handleChangeVideo"
          >
            <a-button type="default"> 上传视频</a-button>
          </a-upload>
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 14, offset: 5 }" style="text-align: center;padding-top: 20px">
          <a-button type="primary" html-type="submit" :loading="loading" :disabled="loading">保存</a-button>
          <a-button style="margin-left: 10px" @click="toRoute('/travel')" :loading="loading" :disabled="loading">取消</a-button>
        </a-form-item>
      </a-form>
      <!-- 图片预览模态框 -->
<!--      <a-modal :open="previewVisible" :footer="null" @cancel="handleCancel">-->
<!--        <img alt="example" style="width: 100%" :src="previewImage" />-->
<!--      </a-modal>-->
        <!-- 图片查看器 -->
        <vue-easy-lightbox
            :visible="previewVisible"
            :imgs="[fileFull(previewImage,'?image/resize,p_12')]"
            @hide="handleCancel"
            moveDisabled
            class="lightbox-custom"
        ></vue-easy-lightbox>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, getCurrentInstance, computed} from 'vue';
import {message} from 'ant-design-vue';
import {PlusOutlined, UploadOutlined} from '@ant-design/icons-vue';
import {travelSave,travelGet} from "@/api/travel";
import {filePrefix, filesInfo} from "@/api/tool";
const formState = reactive({
  id: 0,
  title: '',
  isHidden: false,
  cover:"",
  description: '',
  photoList: [],
  coverList: [],
  tags: [],
  photo:[],
  videoList: [],
  video:'',
});
const formTravelRef = ref(null);
const listType = ref("") //picture-card
onMounted(function (){
  if(formTravelRef.value){
    formTravelRef.value.resetFields();
  }
  const { appContext } = getCurrentInstance();
  const $fileFull = appContext.config.globalProperties.$fileFull;
  const route = useRoute();
  let id = route.params.id;
  id = id - 0
  if(!id){
    return
  }
  loading.value = true;
  travelGet({id:id}).then(res=>{
    if(res&&res.code===200){
      console.log(res.data)
      let obj = res.data
      formState.id = id
      formState.title = obj.title
      formState.description = obj.description
      formState.isHidden = obj.isHidden
      formState.cover = obj.cover
      formState.tags = obj.tags||[]
      if(obj.video){
        let videoList = []
        filesInfo({path:[obj.video]}).then(res=>{
          if(res&&res.code==200){
            const list = res.data.item || []
            list.forEach((item)=>{
              const obj = {uuid:item.id,url:$fileFull(item.id),name:item.name}
              videoList.push(obj)
            })
          }
        }).finally(()=>{
          formState.videoList = videoList
        })
      }
      if(obj.cover){
        formState.coverList.push({uuid: obj.cover,url:$fileFull(obj.cover,'?image/resize,p_12'),name:obj.cover})
      }
      if (listType.value){
        let photoList = []
        obj.photos.forEach((item)=>{
          const obj = {uuid:item,url:$fileFull(item),name:item}
          photoList.push(obj)
        })
        formState.photoList = photoList
      }else {
        let photoList = []
        filesInfo({path:obj.photos}).then(res=>{
          if(res&&res.code==200){
            const list = res.data.item || []
            const mp = {}
            list.forEach((item)=>{
              mp[item.id]= {uuid:item.id,url:$fileFull(item.id),name:item.name}
              // const obj = {uuid:item.id,url:$fileFull(item.id),name:item.name}
              // videoList.push(obj)
            })
            obj.photos.forEach((item)=>{
              const val = mp[item]
              if(val){
                photoList.push(val)
              }
            })
          }
        }).finally(()=>{
          formState.photoList = photoList
        })
      }
    }
  }).finally(()=>{
    loading.value = false;
  })
})

const loading = ref(false);
const previewVisible = ref(false);
const previewImage = ref('');

const handleCancel = () => {
  previewVisible.value = false;
};

const handlePreview = async (file) => {
  if (!file.url && !file.preview) {
    file.preview = await getBase64(file.originFileObj);
  }
  previewImage.value = file.url || file.preview;
  previewVisible.value = true;
};
const movePreview = (file) => {
  if (!file.url && !file.preview) {
    file.preview =  getBase64(file.originFileObj);
  }
  previewImage.value =  file.preview||file.url;
  previewVisible.value = true;
}
const moveDown = (file,fileList) => {
  let index = fileList.indexOf(file);
  const next = fileList[index+1];
  if (!next){
    return;
  }
  fileList[index+1] = file;
  fileList[index]=next;
  formState.photoList  = [...fileList];
}
const moveUp = (file,fileList) => {
  let index = fileList.indexOf(file);
  const next = fileList[index-1];
  if (!next){
    return;
  }
  fileList[index-1] = file;
  fileList[index]=next;
  formState.photoList  = [...fileList];
}
const isUploading = computed(()=>{
  let hasUploading = false;
  formState.photoList.forEach(item => {
    if (item.status === 'uploading') {
      hasUploading =  true;
    }
  });
  return hasUploading;
})
const beforeUpload = (file) => {
  const isImage = file.type.split("/")[0]==='image'
  if (!isImage) {
    console.log(file)
    message.error('只能上传 图片 文件!');
    return false
  }
  const isLt50M = file.size / 1024 / 1024 < 50;
  if (!isLt50M) {
    message.error('图片必须小于 50MB!');
    return false
  }
  return true;
};
const fileFull=(uuid,query)=>{
  if (!uuid) {
    return uuid
  }
  if(uuid.indexOf('http') !== -1) {
    return uuid
  }
  if(uuid.indexOf('?') !== -1) {
    return uuid
  }
  if(query&&typeof query === 'string') {
    return uuid+query
  }
  return uuid
}

const beforeUploadVideo = (file) => {
  const isVideo = file.type.split("/")[0]==='video'
  if (!isVideo) {
    console.log(file)
    message.error('只能上传 视频 文件!');
    return false
  }
  const isLt500M = file.size / 1024 / 1024 < 500;
  if (!isLt500M) {
    message.error('视频必须小于 500MB!');
    return false
  }
  return true;
};
const handleChangeCover = async  (info) => {
  if (info.file && info.file.status === "removed") {
    // Handle file removal
    formState.coverList = formState.coverList.filter(item => item.uid !== info.file.uid);
    return;
  }

  let fileList = [...info.fileList];
  const uuids = new Set();
  let hasUploading = false;

  fileList = fileList.filter(item => {
    if (item.status === 'uploading') {
      hasUploading = true;
      return true; // Keep uploading files in the list
    }
    if (item.status === 'error') {
      return false;
    }
    const uuid = item.uuid || (item.response && item.response.uuid) || '';
    const url = item.url || (item.response && item.response.url) || '';
    if (!uuid) {
      return false;
    }
    // Check for duplicates
    if (uuids.has(uuid)) {
      return false;
    }
    uuids.add(uuid);
    item.uuid = uuid;
    item.url = url;
    return true;
  });
  if (!hasUploading) {
    formState.coverList = [...fileList];
  }
};
const handleChangePhoto = async  (info) => {
  if (info.file && info.file.status === "removed") {
    // Handle file removal
    formState.photoList = formState.photoList.filter(item => item.uid !== info.file.uid);
    return;
  }

  let fileList = [...info.fileList];
  const uuids = new Set();
  let hasUploading = false;

  fileList = fileList.filter(item => {
    if (item.status === 'uploading') {
      hasUploading = true;
      return true; // Keep uploading files in the list
    }
    if (item.status === 'error') {
      return false;
    }
    const uuid = item.uuid || (item.response && item.response.uuid) || '';
    const url = item.url || (item.response && item.response.url) || '';
    if (!uuid) {
      return false;
    }
    // Check for duplicates
    if (uuids.has(uuid)) {
      return false;
    }
    uuids.add(uuid);
    item.uuid = uuid;
    item.url = url;
    return true;
  });
  if (!hasUploading) {
    formState.photoList = [...fileList];
  }
};
const handleChangeVideo = (info) => {
  if (info.file&&info.file.status === "uploading"){
    return false
  }
  let resFileList = [...info.fileList];
  const includes = [];
  resFileList = resFileList.filter(function (item) {
    if(item.status==='error'){
      return false
    }
    let uuid = item.uuid||item.response.uuid
    let url = item.url||item.response.url
    if(!uuid){
      return false
    }
    if(!includes.includes(uuid)){
      item.uuid = uuid
      item.url = url
      includes.push(item.uuid)
      return true
    }
    return false
  })
  if(resFileList.length>0){
    formState.videoList = [resFileList[resFileList.length-1]]
    return
  }
  formState.videoList = resFileList
};

import { useRouter,useRoute } from 'vue-router';
import VueEasyLightbox from "vue-easy-lightbox";
const router = useRouter();
const toRoute=(path)=> {
  router.push(path)
}
const onFinish = (values) => {
  let form = Object.assign({},formState,values)
  form.photo = []
  for (let i in form.photoList){
    let item = form.photoList[i].uuid
    form.photo.push(item)
  }
  if(form.videoList.length>0){
    form.video = form.videoList[0].uuid
  }
  if(form.coverList.length>0){
    form.cover = form.coverList[0].uuid
  }
  delete form['photoList']
  delete form['videoList']
  delete form['coverList']
   loading.value = true
   travelSave(form).then(res=>{
     if(res&&res.code==200){
       toRoute('/travel')
     }
   }).finally(()=>{
     loading.value = false
   })
};

const getBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
};
const labelCol = { style: { width: '80px' } };
const wrapperCol = { span: 24 };
</script>

<style scoped>
/* 自定义上传按钮样式 */
:deep(.ant-upload-select-picture-card) {
  @apply bg-white border border-gray-300 rounded-lg;
}

:deep(.ant-upload-select-picture-card:hover) {
  @apply border-blue-500;
}

/* 响应式调整 */
@media (max-width: 640px) {
  :deep(.ant-form-item-label) {
    @apply pb-2;
  }
}
:deep(.ant-upload-list-overflow-y){
  max-height: 300px;
  overflow-y: scroll;
}
</style>

